<template>
  <div class="resume_header">
    <span>求职简历</span>

  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit, page * limit)" style="width: 100%" height="520px"
      size="large" @filter-change="tablesort">

      <el-table-column label="姓名" prop="uName" width="120" sortable column-key="uName"
        :filters="filterApplyResumeNameData" />
      <el-table-column label="申请岗位" prop="jobName" width="300px" sortable column-key="jobName"
        :filters="filterApplyResumeJobNameData" />
      <el-table-column label="期望工作类型" prop="uNature" sortable column-key="uNature"
        :filters="filterApplyResumeNatureData" />
      <el-table-column label="期望薪资" prop="uSalary">
        <template #default="scope" >
          <div v-if="scope.row.uSalary">{{ scope.row.uSalary }}元/月</div>
          
        </template>
      </el-table-column>

      <el-table-column label="状态" prop="uApplyState" sortable column-key="uApplyState"
        :filters="filterApplyResumeStateData">
        <template #default="scope">
          <el-tag :type="ElTagState(scope.row.uApplyState)">
            {{ scope.row.uApplyState }}
          </el-tag>

        </template>
      </el-table-column>

      <el-table-column align="right" width=300px>
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleShowResume(scope.$index, scope.row)">查看简历</el-button>
          <el-popconfirm width="220" confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF" title="是否确认操作?"
            cancel-button-type="info" @confirm="handleQualifieddResume(scope.$index, scope.row)">
            <template #reference>
              <el-button size="small" type="success"
                :disabled="scope.row.uApplyState == '未通过' || scope.row.uApplyState == '已通过' ? true : false">通过
              </el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm width="220" confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF" title="是否确认操作?"
            cancel-button-type="info" @confirm="handleUnqualifieddResume(scope.$index, scope.row)">
            <template #reference>
              <el-button size="small" type="success"
                :disabled="scope.row.uApplyState == '未通过' || scope.row.uApplyState == '已通过' ? true : false">不合适
              </el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <EAuditResumeResultDialog v-if="dialogFormVisible" :closeAuditResultForm="closeAuditResultForm"
      :formAuditResultContent="formAuditResultContent" :dialogFormVisible="dialogFormVisible"
      :handleConfirmAuditResult="handleConfirmAuditResult" :confirmAuditResult="confirmAuditResult" />
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>
  </div>

  <PreviewUserResume @handleCloseResume="handleCloseResume" v-if="dialogTableVisible" :userInfo="userInfo" />
</template>
<script lang='ts' setup>

import { computed, ref, onMounted, reactive, watch, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import PreviewUserResume from "@/components/enterprise/PreviewUserResume.vue"
import EAuditResumeResultDialog from "@/components/enterprise/EAuditResumeResultDialog.vue"
import { upEUserResumeState, getEUserApplyJobs } from "@/api/enterpriseApi"
import { elmessage, data, ElTagState, formatDate } from "@/hook/hook"
import { ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router"

// 该组件是要请求后端拿到对应的数据

const dialogTableVisible = ref(false)

const store = useStore()
const router = useRouter()
const isShow = ref(false)

interface ApplyResume {
  id: string
  jobId: string
  jobName: string
  uId: string
  uName: string
  uNature: string
  uSalary: string
  uApplyState: string
  uStateContent: string
}
const tableData: ApplyResume[] = reactive([])

const search = ref('')
const userInfo = ref()
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      // 通过岗位名称筛选
      // data.name.toLowerCase().includes(search.value.toLowerCase())
      data.uName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)
// 定义筛选类型
interface filterType {
  text: string,
  value: string
}

var applyResumeNameArr: any = reactive([])
var applyResumeJobNameArr: any = reactive([])
var applyResumeNatureArr: any = reactive([])
var applyResumeStateArr: any = reactive([])

const tableData_1: ApplyResume[] = reactive([])
const setApplyResumeNameArr = (arr: any) => {
  applyResumeNameArr = arr
}
const getApplyResumeNameArr = () => {
  return applyResumeNameArr
}
const setApplyResumeJobNameArr = (arr: any) => {
  applyResumeJobNameArr = arr
}
const getApplyResumeJobNameArr = () => {
  return applyResumeJobNameArr
}
const setApplyResumeNatureArr = (arr: any) => {
  applyResumeNatureArr = arr
}
const getApplyResumeNatureArr = () => {
  return applyResumeNatureArr
}
const setApplyResumeStateArr = (arr: any) => {
  applyResumeStateArr = arr
}
const getApplyResumeStateArr = () => {
  return applyResumeStateArr
}

const tablesort = (filterArr: ApplyResume) => {
  // 清除原表格数据
  tableData.splice(0, tableData.length)
  if ((typeof (filterArr.uName)) == "object") {
    setApplyResumeNameArr(filterArr.uName)
  }
  if ((typeof (filterArr.jobName)) == "object") {
    setApplyResumeJobNameArr(filterArr.jobName)
  }
  if ((typeof (filterArr.uNature)) == "object") {
    setApplyResumeNatureArr(filterArr.uNature)
  }
  if ((typeof (filterArr.uApplyState)) == "object") {
    setApplyResumeStateArr(filterArr.uApplyState)
  }

  const uNameLength = getApplyResumeNameArr().length
  const jobNameLength = getApplyResumeJobNameArr().length
  const uNatureLength = getApplyResumeNatureArr().length
  const uApplyStateLength = getApplyResumeStateArr().length
  // console.log(getApplyResumeNameArr());
  // console.log(getApplyResumeJobNameArr());
  // console.log(getApplyResumeNatureArr());
  // console.log(getApplyResumeStateArr());

  // 按筛选条件重新加入数据
  tableData_1.forEach((valu: any, index: any, arr_1: any) => {
    // console.log(valu);

    // 所有筛选重置，即最初排序
    if (uNameLength == 0 && jobNameLength == 0 && uNatureLength == 0 && uApplyStateLength == 0) {
      if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
        tableData.push(valu)
      }

    }

    // 只筛选求职者姓名
    else if (uNameLength > 0 && jobNameLength == 0 && uNatureLength == 0 && uApplyStateLength == 0) {

      if (getApplyResumeNameArr().includes(valu["uName"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选岗位名称
    else if (uNameLength == 0 && jobNameLength > 0 && uNatureLength == 0 && uApplyStateLength == 0) {
      if (getApplyResumeJobNameArr().includes(valu["jobName"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选简历期望工作类型
    else if (uNameLength == 0 && jobNameLength == 0 && uNatureLength > 0 && uApplyStateLength == 0) {
      if (getApplyResumeNatureArr().includes(valu["uNature"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选简历状态
    else if (uNameLength == 0 && jobNameLength == 0 && uNatureLength == 0 && uApplyStateLength > 0) {
      if (getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选求职者姓名、岗位名称
    else if (uNameLength > 0 && jobNameLength > 0 && uNatureLength == 0 && uApplyStateLength == 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeJobNameArr().includes(valu["jobName"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选求职者姓名、简历期望工作类型
    else if (uNameLength > 0 && jobNameLength == 0 && uNatureLength > 0 && uApplyStateLength == 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeNatureArr().includes(valu["uNature"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选求职者姓名、简历状态
    else if (uNameLength > 0 && jobNameLength == 0 && uNatureLength == 0 && uApplyStateLength > 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 岗位名称、简历期望工作类型
    else if (uNameLength == 0 && jobNameLength > 0 && uNatureLength > 0 && uApplyStateLength == 0) {
      if (getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeNatureArr().includes(valu["uNature"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 岗位名称、简历状态
    else if (uNameLength == 0 && jobNameLength > 0 && uNatureLength == 0 && uApplyStateLength > 0) {
      if (getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 简历期望工作类型、简历状态
    else if (uNameLength == 0 && jobNameLength == 0 && uNatureLength > 0 && uApplyStateLength > 0) {
      if (getApplyResumeNatureArr().includes(valu["uNature"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选求职者姓名、岗位名称、简历期望工作类型
    else if (uNameLength > 0 && jobNameLength > 0 && uNatureLength > 0 && uApplyStateLength == 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeNatureArr().includes(valu["uNature"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选求职者姓名、简历期望工作类型、简历状态
    else if (uNameLength > 0 && jobNameLength == 0 && uNatureLength > 0 && uApplyStateLength > 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeNatureArr().includes(valu["uNature"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选求职者姓名、岗位名称、简历状态
    else if (uNameLength > 0 && jobNameLength > 0 && uNatureLength == 0 && uApplyStateLength > 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 岗位名称、简历期望工作类型、简历状态
    else if (uNameLength == 0 && jobNameLength > 0 && uNatureLength > 0 && uApplyStateLength > 0) {
      if (getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeNatureArr().includes(valu["uNature"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 求职者姓名、岗位名称、简历期望工作类型、简历状态
    else if (uNameLength > 0 && jobNameLength > 0 && uNatureLength > 0 && uApplyStateLength > 0) {
      if (getApplyResumeNameArr().includes(valu["uName"]) && getApplyResumeJobNameArr().includes(valu["jobName"]) && getApplyResumeNatureArr().includes(valu["uNature"]) && getApplyResumeStateArr().includes(valu["uApplyState"])) {
        if (tableData.findIndex((item: { id: string; }) => item.id == valu["id"]) == -1) {
          tableData.push(valu)
        }

      }
    }



  })



}
const filterApplyResumeNameData: filterType[] = reactive([])
const filterApplyResumeJobNameData: filterType[] = reactive([])
const filterApplyResumeNatureData: filterType[] = reactive([])
const filterApplyResumeStateData: filterType[] = reactive([])

// 审核简历
// 审核结果--dialog
const formAuditResultContent = reactive({
  jobId: "",
  uId: "",
  uStateContent: "",
  uApplyState: ""
})
const dialogFormVisible = ref(false)

// 将审核结果提交
const confirmAuditResult = () => {
  const uApplyState=formAuditResultContent.uApplyState
  const uId=formAuditResultContent.uId
  const newData = {
    ...data(),
    ...formAuditResultContent,
  }
  upEUserResumeState(newData).then((res: any) => {
    if (res.data["code"] == "200") {
      // 使用循环将表格所操作行的内容更新
      tableData.forEach((value, index, self) => {
        if (value.uId ==uId) {
          value.uApplyState = uApplyState
        }
      })
      elmessage(res.data["message"], res.data["type"])
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
  formAuditResultContent.jobId = ""
  formAuditResultContent.uId = ""
  formAuditResultContent.uStateContent = ""
  closeAuditResultForm()
}
// 关闭dialog之前的回调,用于用户点击灰色区域触发
const handleConfirmAuditResult = (done: () => void) => {
  ElMessageBox.confirm('是否关闭页面，并提交内容？')
    .then(() => {
      done()
      confirmAuditResult()
    })
    .catch(() => {
      // console.log("取消提交");

      // catch error
    })
}

// 关闭对话框的回调
const closeAuditResultForm = () => {
  dialogFormVisible.value = false
  formAuditResultContent.jobId = ""
  formAuditResultContent.uId = ""
  formAuditResultContent.uStateContent = ""
}


// 预览简历
const handleShowResume = (index: number, row: ApplyResume) => {
  dialogTableVisible.value = true
  userInfo.value = row
  // 查看简历后，请求后台修改对应用户岗位申请状态
  // store.commit("upUserApply")

}
// 关闭预览简历
const handleCloseResume = (index: number, row: ApplyResume) => {
  dialogTableVisible.value = false
}

// 通过
const handleQualifieddResume = async (index: number, row: ApplyResume) => {
  formAuditResultContent.jobId = row.jobId
  formAuditResultContent.uId = row.uId
  formAuditResultContent.uStateContent = row.uStateContent
  formAuditResultContent.uApplyState = "已通过"

  dialogFormVisible.value = true
  

}
// 不合适
const handleUnqualifieddResume = (index: number, row: ApplyResume) => {
  formAuditResultContent.jobId = row.jobId
  formAuditResultContent.uId = row.uId
  formAuditResultContent.uStateContent = row.uStateContent
  formAuditResultContent.uApplyState = "未通过"

  dialogFormVisible.value = true
  
}

// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {

  limit.value = val
  page.value = 1

}
const handleCurrentChange = (val: number) => {
  page.value = val

}

const init = async () => {
  await getEUserApplyJobs(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
        tableData_1.push(value)
      })
      res.data["applyresumename"].forEach((value: any, index: any, self: any) => {
        filterApplyResumeNameData.push(value)
      });
      res.data["applyresumenature"].forEach((value: any, index: any, self: any) => {
        filterApplyResumeNatureData.push(value)
      });
      res.data["applyresumejobname"].forEach((value: any, index: any, self: any) => {
        filterApplyResumeJobNameData.push(value)
      });
      res.data["applyresumestate"].forEach((value: any, index: any, self: any) => {
        filterApplyResumeStateData.push(value)
      });
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);
    }

  })
}

onBeforeMount(() => {
  init()
})

</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

a {
  text-decoration: none;
  color: #000;
}


.level .el-progress--line {
  margin-bottom: 15px;
  width: 200px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

/* 简历 */
.preview .resume {
  width: 820px;
  display: flex;
  /* box-shadow: 8px 1px 10px #d8d8d8;
  margin: 50px auto; */
  border: 0.5px solid #254665;
  height: 800px;
}

.preview .resume .wrapper>.title {
  border-bottom: 1px solid #254665;
  padding: 3px 0;
  font-size: 22px;
}

/* 简历左边信息 */
.preview .resume .left {
  width: 270px;
  background-color: #254665;
  color: #FFFFFF;
}

.preview .resume .left .wrapper {
  padding: 0 30px;
  border: 1px solid #254665;
}

.preview .resume .left .image-wrapper {
  width: 120px;
  height: 150px;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  margin: 60px auto 0;
}

.preview .resume .left .image-wrapper img {
  width: 120px;
  height: 150px;
}

.preview .resume .left .base-info {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.preview .resume .left .base-info span {
  margin: 6px 0;
}

.preview .resume .left .specialty .list .item {
  margin-bottom: 12px;
}

.preview .resume .left .specialty {
  /* display: flex; */
  align-items: center;
  margin-top: 4px;
}

.preview .resume .left .specialty .level>span {
  width: 60px;
  text-align: center;
}

.preview .resume .left .specialty .progress-wrapper {
  width: calc(100% - 60px);
  height: 10px;
}

/* 简历右边信息 */
.preview .resume .right {
  flex: 1;
  color: #254665;
  padding: 20px 20px 30px 20px;
}

.preview .resume .right .list .item:not(:first-child) {
  margin-top: 20px;
}

.preview .resume .right .list .item .title {
  margin: 4px 0;
}

.preview .resume .right .list .item .title>span {
  margin-right: 40px;
}

.preview .resume .right .wrapper {
  /* border: 1px solid #FFFFFF; */
  height: 90px;
}

.wrapper {
  margin: 10px 0;
}

.preview .resume .right .name-wrapper {
  display: flex;
  vertical-align: bottom;
  align-items: baseline;
  margin: 8px 0;
  /* border: 1px solid #FFFFFF; */
  /* font-size: 32px; */
  line-height: 50px;
}

.preview .resume .right .name-wrapper h1 {
  font-weight: normal;
  margin: 0;
  font-size: 40px;
}

.preview .resume .right .name-wrapper span {
  font-size: 15px;
  height: 20px;
  margin-left: 16px;
  color: #7a7a7a;
}

.preview .resume .right .job-intention .intention>span {
  margin-right: 24px;

}

.intention {
  margin: 15px 0;
}

.list {
  margin: 15px 0;
}

.preview .resume .right .education .item .desc,
.preview .resume .right .projects .item .desc,
.preview .resume .right .honors .honor,
.preview .resume .right .self-evaluation .evaluation,
.preview .resume .right .internship .item .desc {
  color: #8c8c8c;
  font-size: 14px;
}

.preview .resume .right .honors .honor {
  margin: 2px 0;
}

.preview .resume .right .internship .item ul li {
  list-style: disc;
  margin: 4px 0 0 20px;
}
</style>